<script setup lang="ts">
import type { Card } from '@/types/course/card';
import { useRouter } from 'vue-router';

const props = defineProps<{
  app: Card;
  cardType: string;
}>();

const router = useRouter();

const handleInfo = (path: string | undefined) => {
  if (props.cardType === '课程') {
    localStorage.setItem('courseId', props.app.courseId ? props.app.courseId : '');
    localStorage.setItem('folderId', props.app.folderId ? props.app.folderId : '');

    router.push({
      name: 'learning/xiangqing',
      params: { courseId: props.app.courseId, folderId: props.app.folderId },
    });
  }
  else if (props.cardType === '技能树' && path) {
  // console.log('app', props.app);
    // 将 id 存储到本地存储
    router.push(path);
  }
};
</script>

<template>
  <div class="study-card">
    <div>
      <div class="img">
        <img :src="app.img" alt="">
      </div>
      <div class="content">
        <p class="card-title">
          {{ app.cardName }}
        </p>
        <p class="card-description">
          {{ app.description }}
        </p>
      </div>
    </div>
    <div class="footer">
      <a-button class="start-chat-button" @click="handleInfo(app.path ? app.path : undefined)">
        立即使用
      </a-button>
    </div>
  </div>
</template>

<style scoped lang="scss">
.study-card {
  width: 100%; /* 占满父容器的宽度 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.5rem 1rem;
  border-radius: 1.25rem;
  background-color: #fff;
  box-sizing: border-box; /* 包含内边距和边框在内 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 可选：添加阴影使卡片更具层次感 */
}

.img img {
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
}

.content {
  margin-top: 1rem;

  .card-title {
    font-size: 1.25rem;
    font-weight: bold;
    color: #000;
    margin: 0;
  }

  .card-description {
    margin-top: 0.5rem;
    color: rgba(129, 131, 143, 1);
    font-size: 1rem;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 显示两行文本 */
    line-clamp: 2; /* 显示两行文本 */
    -webkit-box-orient: vertical;
  }
}

.footer {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}

.start-chat-button {
  background-color: #e6f0ff;
  color: #2669f3;
  border: none;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;

  &:hover {
    background-color: #3867ea;
    color: #fff;
  }
}
</style>
